<template>
  <div class="step-box">
    <div v-if="isShowFlag === 'one'">
      <el-row :gutter="20" class="page-box">
        <el-col :span="24" style="padding: 3% 10% 20px;">
          <p class="padding-line-height">*客服：您好，请问您是否为<span class="font-weight">{{customerCardInfo.customerName}}</span>本人？</p>
          <p class="padding-line-height">客户：是</p>
          <p class="padding-line-height">*客服：请问您是否自愿在本行激活银行卡功能/开通社保卡银行账户功能？</p>
          <p class="padding-line-height">请问是否由您代理<span class="font-weight">{{customerCardInfo.customerName}}</span>在本行激活银行卡功能/开通社保卡银行账户功能？（代理）</p>
          <p class="padding-line-height">客户：是</p>
          <p class="padding-line-height">*客服：请确认您提供的激活申请资料是否真实、有效、完整、合法、准确？</p>
          <p class="padding-line-height">客户：是</p>
          <p class="padding-line-height">*客服：请问您是否已认真阅读告知书及相关责任条款，理解、接受全部内容并自愿受法律约束。</p>
          <p class="padding-line-height">客户：是</p>
          <p class="padding-line-height">*客服：银行账户严禁出租、出借、出售、购买，违者将按相关账户管理制度规定，5年内暂停个人账户非柜面业务、支付账户所有业务，不得新开立账户，同时您的个人信息将被移送金融信用信息基础数据库并向社会公布。请问您是否知晓？</p>
          <p class="padding-line-height">客户：是或已知晓</p>
        </el-col>
        <el-col :span="24" style="padding: 0 10%;">
          <el-col><h4>客户签名</h4></el-col>
          <el-col class="signNameBox mt10">
            <el-col style="width: 100%;height: 100%;" class="txt-center"><h2 v-if="cardAssignFlag">客户签名区</h2><img style="width: 100%;" v-if="!cardAssignFlag" :src='cusSignBase64' alt=""></el-col>
          </el-col>
        </el-col>
        <el-col class="view-bottom">
          <el-row :gutter="20">
            <el-col :span="12" class="txt-right">
              <el-button type="primary" @click="sendAssignClick"><span v-text="assignHtml"></span></el-button>
            </el-col>
            <el-col :span="12" class="txt-left">
              <el-button type="primary" @click="nextStep2">确认</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div v-else-if="isShowFlag === 'two'" class="mt5 custInfo-box">
      <el-row class="view-header">卡激活业务确认单</el-row>
      <el-row class="view-middle">
        <BizCertForm :option="bizCertOption" :data="bizCertData"></BizCertForm>
      </el-row>
      <el-row class="view-bottom">
        <el-row :gutter="20">
          <el-col :span="12" class="txt-right">
            <el-button type="primary" @click="bizCertFail">拒绝</el-button>
          </el-col>
          <el-col :span="12" class="txt-left">
            <el-button type="primary" @click="bizCertSuccess">通过</el-button>
          </el-col>
        </el-row>
      </el-row>
    </div>
    <div v-else-if="isShowFlag === 'three'" class="mt5 custInfo-box">
      <el-row class="view-box">
        <el-row class="view-header">认证结果</el-row>
        <el-row>
          <el-row class="photo-box">
            <div class="success-photo center">
              <img src='assets/theme/img/viceoBiz/success.png' alt="">
            </div>
            <el-row class="photo-title" style="margin: 10px 0px"><h2>认证成功</h2></el-row>
            <el-row class="padding-line-height txt-center">渠道编号：{{vqid}}</el-row>
            <el-row class="padding-line-height txt-center">流水号：{{videoSerialId}}</el-row>
            <el-row class="padding-line-height txt-center">dockID：{{sessionId}}</el-row>
          </el-row>
        </el-row>
        <el-row class="view-bottom">

        </el-row>
      </el-row>
    </div>
    <div v-else-if="isShowFlag === 'four'" class="mt5 custInfo-box">
      <el-row class="view-box">
        <el-row class="view-header">认证结果</el-row>
        <el-row>
          <el-row class="photo-box">
            <div class="success-photo center">
              <img src='assets/theme/img/viceoBiz/cardFail.png' alt="">
            </div>
            <el-row class="photo-title" style="margin: 10px 0px"><h2>认证失败</h2></el-row>
            <el-row class="padding-line-height txt-center">失败原因：{{reasonDescribe}}</el-row>
          </el-row>
        </el-row>
        <el-row class="view-bottom">

        </el-row>
      </el-row>
    </div>
    <div v-else-if="isShowFlag === 'five'" class="mt5 custInfo-box">
      <el-row class="view-header">交易结束</el-row>
      <el-row class="">
        <el-row class="photo-box">
          <div class="exceed-photo">
            <img src='assets/theme/img/viceoBiz/ending.png' alt="">
          </div>
          <el-row class="photo-title">交易结束</el-row>
        </el-row>
      </el-row>
      <el-row class="view-bottom"></el-row>
    </div>
    <el-dialog title="凭证预览" :visible.sync="dialogVisible" top="20px" width="95%">
      <el-scrollbar style="height: 500px;">
        <img style="width: 100%" :src="bizCertUrl" alt="">
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="bizFromConfirmAction">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="拒绝申请" :visible.sync="dialogFormVisibleFail" append-to-body width="70%">
      <el-row>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入拒绝原因……"
          v-model="failReason" resize="none">
        </el-input>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-right: 10px;" @click="dialogFormVisibleFail = false">取 消</el-button>
        <el-button type="primary" @click="bizCertFailClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import $ from 'jquery'
  import Axios from 'axios'
  import html2canvas from 'html2canvas'
  import BizCertForm from '@/views/videoBiz/phoneBank/common/bizCertForm'
  import {
    uploadFile,
    submitBizCert,
    imgTransBase64,
    socialCardActive,
    onlinePayOpen,
    saveTransPipeline,
    submitBizForm
  } from '@/api/videoBiz/videoBiz'

  export default {
    name: 'cardActiveVideo',
    components: {
      BizCertForm
    },
    data() {
      return {
        bankName: '江苏苏州农村商业银行股份有限公司',
        isShowFlag: 'one',
        cardAssignFlag: true,
        assignHtml: '签名',
        customerCardInfo: {},
        dialogVisible: false,
        bizCertUrl: '',
        frontName: '',
        reverseName: '',
        cusSceneName: '',
        bizCertName: '',
        cardStateMent: '',
        frontCardPhoto: '',
        frontBase64: 'assets/theme/img/viceoBiz/frontPhoto.png',
        reverseBase64: 'assets/theme/img/viceoBiz/reversePhoto.png',
        cusSceneBase64: 'assets/theme/img/viceoBiz/perpr.png',
        cusSignBase64: '',
        frontCardBase64: '',
        reverseCardBase64: '',
        bizCertData: {},
        bizCertOption: {},
        // 视频流水号
        videoSerialId: '',
        bizCertSeqNo: '',
        vqid: '',
        // 卡激活开通标志（0:未开户未激活,1:已开户未激活,2:已开通已激活）
        // khflag: '',
        failReason: '',
        dialogFormVisibleFail: false,
        cardType: '',
        cardActiveFlag: false,
        tranDate: '',
        tranTime: '',
        atmOpenTransfer: false,
        payResult: false,
        sessionId: '',
        reasonDescribe: ''
      }
    },
    created() {

    },
    mounted() {
      /********************************** 手机银行交互信令 ****************************************/
      let self = this
      self.bizCertOption = window.videoOptions.openHouseVideoOption.phoneBankCardActiveOption
      // 工作台结束会话
      window.eventEmitter.$on('EventVideoChatDone', () => {
        Constants.ModelChat = {}
        let biztype = sessionStorage.getItem('businessType')
        if ('卡激活' == biztype) {
          self.activeName = 'third'
          window.ctpMenuOption.home.redirectName = 'phoneBankCardActive'
          self.resetGlobalVarible()
          self.isShowFlag = 'one'
          self.nextStep(0)
        }
      })
      // 视频进线
      window.eventEmitter.$on('EventPhoneBankCardRing', (data) => {
        console.log(JSON.stringify(data))
        self.resetGlobalVarible()
        self.isShowFlag = 'one'
        self.nextStep(0)
        self.customerCardInfo = data.customerInfo
        self.sessionId = Constants.ModelChat.sid
        self.cardType = data.customerInfo.cardType
        self.saveTransPipelineFun()
        sessionStorage.setItem('businessType', data.customerInfo.businessType)
      })
      // 收到客户签名
      window.eventEmitter.$on('EventCardGetBizSign', (data) => {
        // 客户签名照片
        if (data.cusSignCard) {
          imgTransBase64(data.cusSignCard).then(response => {
            self.cardAssignFlag = false
            self.cusSignBase64 = response.data
            self.assignHtml = '重新签名'
          }).catch(error => {
            console.log(error)
          })
        }
      })
      // 收到面签业务申请单
      window.eventEmitter.$on('EventCardGetBizSignForm', (data) => {
        // 身份证正面照
        if (data.frontIDCard) {
          self.frontName = data.frontIDCard
          imgTransBase64(data.frontIDCard).then(response => {
            self.frontBase64 = response.data
            self.$set(self.bizCertData, 'frontPhoto', self.frontBase64)
          }).catch(error => {
            console.log(error)
          })
        }
        // 身份证反面照
        if (data.reverseIDCard) {
          self.reverseName = data.reverseIDCard
          imgTransBase64(data.reverseIDCard).then(response => {
            self.reverseBase64 = response.data
            self.$set(self.bizCertData, 'backPhoto', self.reverseBase64)
          }).catch(error => {
            console.log(error)
          })
        }
        // 客户头像
        if (data.cusSceneCard) {
          self.cusSceneName = data.cusSceneCard
          imgTransBase64(data.cusSceneCard).then(response => {
            self.cusSceneBase64 = response.data
            self.$set(self.bizCertData, 'customerPhoto', self.cusSceneBase64)
          }).catch(error => {
            console.log(error)
          })
        }
        // 自证声明
        if (data.cardStateMent) {
          self.cardStateMent = data.cardStateMent
        }
        // 卡正面照
        if (data.frontCardPhoto) {
          self.frontCardPhoto = data.frontCardPhoto
          imgTransBase64(data.frontCardPhoto).then(response => {
            self.frontCardBase64 = response.data
            self.$set(self.bizCertData, 'frontCardPhoto', self.frontCardBase64)
          }).catch(error => {
            console.log(error)
          })
        }
        // 渠道编号
        self.vqid = (Constants.Model.userData && Constants.Model.userData.vqid) || ''
        // ATM转账开通（开通、不开通）
        self.atmOpenTransfer = data.tradInfoList.atmOpenTransfer ? '开通' : '未开通'
        // 互联网在线支付（开通、不开通）
        self.payResult = data.tradInfoList.payResult ? '开通' : '未开通'
        // 电子凭证信息
        self.bizCertData = {
          /************************************ 交易信息 *************************************/
          // 客户姓名
          'name': data.customerInfoList.name,
          // 身份证号码
          'idCard': data.customerInfoList.idCard,
          // 电话号码
          'tel': data.customerInfoList.tel,
          // 联系地址
          'address': data.customerInfoList.address,
          // 职业
          'profession': data.customerInfoList.profession,
          // 职业中类
          'professionType': data.customerInfoList.professionType,
          // 正面照
          'frontPhoto': self.frontBase64,
          // 反面照
          'backPhoto': self.reverseBase64,
          // 联网核查结果
          'internetResult': data.customerInfoList.internetResult,
          // 人像比对结果
          'onlineResult': data.customerInfoList.onlineResult,
          // 客户人像
          'customerPhoto': self.cusSceneBase64,
          // 卡正面照
          'frontCardPhoto': self.frontCardBase64,
          // 卡反面照
          // 'reverseCardPhoto': self.reverseCardBase64,
          /************************************ 交易信息 *************************************/
          // 卡激活开通标志
          'khflag': data.tradInfoList.khflag,
          // 密码
          'password': data.tradInfoList.password,
          // 户名
          'accountName': data.tradInfoList.accountName,
          // 卡号
          'tradIdCard': data.tradInfoList.idCard,
          // 业务类型
          'businessType': data.tradInfoList.businessType,
          // ATM转账开通code
          'atmOpenTransferCode': data.tradInfoList.atmOpenTransfer,
          // ATM转账开通
          'atmOpenTransfer': self.atmOpenTransfer,
          // ATM每日转账限额
          'atmLimitTransfer': data.tradInfoList.atmLimitTransfer,
          // 互联网在线支付
          'payResult': self.payResult,
          // 互联网在线支付code
          'payResultCode': data.tradInfoList.payResult,
          // 客户承诺
          'customerCommitment': '我自愿在本行激活银行卡功能，确认提供的激活申请资料真实、有效、完整、合法、准确，且已认真阅读《开设个人银行结算账户涉通讯我网络新型违法犯罪法律责任及防范提示告知书》及相关责任条款，并理解、接受全部内容。',
          // 客户签名
          'customerSignature': self.cusSignBase64,
          // 交易日期
          'transactionDate': data.tradInfoList.transactionDate,
          // 客服人员编号
          'managerNum': Constants.Agent.agentId,
          // 客服人员姓名
          'manager': Constants.Agent.agentName,
          // 老市民卡卡号
          'oldsmkkh': data.tradInfoList.oldsmkkh,
          // 揽存员编号
          'lcybh': data.tradInfoList.lcybh,
          // 机构号
          'branchCode': data.tradInfoList.branchCode
        }
        // 更新交易流水
        self.updateTransPipelineFun(true, false)
      })
    },
    methods: {
      // 步骤条步进
      nextStep(index) {
        this.$emit('nextStep', index)
      },
      // 发起签名
      sendAssignClick() {
        console.log('发起签名')
        globalUserData.sendEventCardResBizSign()
      },
      // 跳转到申请表单页面
      nextStep2() {
        if (window.Settings.nextStepFlag) {
          this.cardAssignFlag = false
        }
        if (this.cardAssignFlag) {
          globalUiKit.notify('提示', '请先执行签名操作！', 'error')
          return
        }
        this.nextStep(1)
        this.isShowFlag = 'two'
        globalUserData.sendEventCardFormStep()
      },
      // 拒绝申请
      bizCertFail() {
        this.dialogFormVisibleFail = true
      },
      // 确认拒绝
      bizCertFailClick() {
        if (!this.failReason) {
          globalUiKit.notify('提示', '拒绝原因不能为空！', 'error')
          return
        }
        this.dialogFormVisibleFail = false
        globalUserData.sendEventCardFail(this.failReason)
        this.updateTransPipelineFun(true, false)
        this.failReason = ''
        this.nextStep(2)
        this.isShowFlag = 'four'
      },
      // 接口失败全局变量控制
      globalBizCertFailReason(message) {
        this.cardActiveFlag = false
        this.dialogVisible = false
        this.failReason = message
        this.nextStep(2)
        this.isShowFlag = 'four'
        globalUserData.sendEventCardFail(this.failReason)
        this.updateTransPipelineFun(false, false, '2')
      },
      // 接口失败全局变量控制
      globalBizCertFail(message) {
        this.cardActiveFlag = false
        this.dialogVisible = false
        this.failReason = message
        this.nextStep(2)
        this.isShowFlag = 'four'
        this.updateTransPipelineFun()
      },
      // 电子凭证图片显示
      bizCertSuccess() {
        let self = this
        html2canvas(document.querySelector("#bizVideoHouseCertCanvas"), {
          allowTaint: false
        }).then(function (canvas) {
          console.log('biz cert canvas is: ' + canvas.toDataURL())
          self.dialogVisible = true
          self.bizCertUrl = canvas.toDataURL()
        })
      },
      // 业务确认单提交(卡激活)
      bizFromConfirmAction() {
        // 社保卡激活
        if ('2' == this.cardType) {
          this.socialCardActiveFun()
        }
        // 借记卡卡激活
        else {
          this.submitBizFormFun()
        }
      },
      /********************************* 社保卡激活 ***************************************/
      socialCardActiveFun() {
        let param = {
          'address': this.bizCertData.address,
          'cardNo': this.bizCertData.tradIdCard,
          'custName': this.bizCertData.name,
          'flag': this.bizCertData.khflag,
          'idCardNo': this.bizCertData.idCard,
          'idCardType': '1',
          'password': this.bizCertData.password,
          'phone': this.bizCertData.tel,
          'onlyTran': '卡激活',
          'oldsmkkh': this.bizCertData.oldsmkkh,
          'lcybh': this.bizCertData.lcybh,
          'branchCode': this.bizCertData.branchCode
        }
        // 社保卡激活
        socialCardActive(param).then(res => {
          console.log('response social card active data is: ' + JSON.stringify(res))
          if (res.data && res.data.code == 200) {
            this.videoSerialId = res.data.data.hostSerial
            this.tranDate = res.data.data.tranDate
            this.tranTime = res.data.data.tranTime
            this.cardActiveFlag = true
            // 互联网开通
            let params = {
              'acctName': this.bizCertData.name,
              'cardNo': this.bizCertData.tradIdCard,
              'idCardNo': this.bizCertData.idCard,
              'idCardType': '1',
              'opnFlg': this.bizCertData.payResultCode ? '0' : '1'
            }
            onlinePayOpen(params).then(dbResponse => {
              let data = dbResponse.data
              console.log('response online pay open data is: ' + JSON.stringify(dbResponse))
              if (data && data.code == 200) {
                globalUserData.sendEventCardSuccess()
                this.openVideoUploadFileFun()
              } else {
                if (!data.message) {
                  data.message = 'online pay open failed！'
                }
                this.reasonDescribe = '社保卡激活成功，互联网开通失败！'
                this.globalBizCertFailReason(data.message)
                window.globalUiKit.alert('互联网开通失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
              }
            }).catch(error => {
              console.log(error)
              error = 'online pay open failed！'
              this.reasonDescribe = '社保卡激活成功，互联网开通失败！'
              this.globalBizCertFailReason(error)
              window.globalUiKit.alert('互联网开通失败', '失败原因：' + error + '；入参：' + JSON.stringify(params))
            })
          } else {
            if (!res.data.message) {
              res.data.message = 'social Security card activation failed！'
            }
            this.reasonDescribe = '社保卡激活失败！'
            this.globalBizCertFailReason(res.data.message)
            window.globalUiKit.alert('社保卡激活失败', '失败原因：' + res.data.message + '；入参：' + JSON.stringify(param))
          }
        }).catch(err => {
          console.log(err)
          err = 'social Security card activation failed！'
          this.reasonDescribe = '社保卡激活失败！'
          this.globalBizCertFailReason(err)
          window.globalUiKit.alert('社保卡激活失败', '失败原因：' + err + '；入参：' + JSON.stringify(param))
        })
      },
      /********************************* 借记卡激活 ***************************************/
      // 提交业务确认单(借记卡激活)
      submitBizFormFun: function () {
        let params = {
          'atmTransferOpnFlg': this.bizCertData.atmOpenTransferCode ? '1' : '0',
          'bankCardNo': this.bizCertData.tradIdCard,
          'icCardSerialNo': '1',
          'idCardNo': this.bizCertData.idCard,
          'password': this.bizCertData.password,
          'reservePhoneNum': this.bizCertData.tel,
          'tellerNo': '',
          'thirdPayOpnFlg': this.bizCertData.payResultCode ? '0' : '1',
          'tradingChannelFlg': '',
          'transactionBranchId': '',
          'transferPerDay': this.bizCertData.atmLimitTransfer,
          'twoTrackInfo': '',
          'onlyTran': '卡激活',
          'oldsmkkh': this.bizCertData.oldsmkkh,
          'lcybh': this.bizCertData.lcybh
        }
        console.log('request IC card form data: ' + JSON.stringify(params))
        submitBizForm(params).then(response => {
          let data = response.data
          console.log('response IC card form data: ' + JSON.stringify(data))
          if (200 == data.code && data.data) {
            this.videoSerialId = data.data.CoreSeqNo
            this.tranDate = data.data.tranDate
            this.tranTime = data.data.tranTime
            this.cardActiveFlag = true
            // 互联网开通
            let params2 = {
              'acctName': this.bizCertData.name,
              'cardNo': this.bizCertData.tradIdCard,
              'idCardNo': this.bizCertData.idCard,
              'idCardType': '1',
              'opnFlg': this.bizCertData.payResultCode ? '0' : '1'
            }
            onlinePayOpen(params2).then(dbResponse => {
              let data = dbResponse.data
              console.log('response online pay open data is: ' + JSON.stringify(dbResponse))
              if (200 == data.code && data.data) {
                this.openVideoUploadFileFun()
                globalUserData.sendEventCardSuccess()
              } else {
                this.reasonDescribe = '互联网开通失败！'
                this.globalBizCertFailReason(data.message)
                window.globalUiKit.alert('互联网开通失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
              }
            }).catch(error => {
              let reason = 'online pay open failed！' || error
              this.reasonDescribe = '互联网开通失败！'
              this.globalBizCertFailReason(reason)
              window.globalUiKit.alert('互联网开通失败', '失败原因：' + reason + '；入参：' + JSON.stringify(params2))
            })
          } else {
            if (!data.message) {
              data.message = 'IC card activation failed！'
            }
            this.reasonDescribe = '借记卡激活失败！'
            this.globalBizCertFailReason(data.message)
            window.globalUiKit.alert('借记卡激活失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
          }
        }).catch(error => {
          console.log(error)
          error = 'IC card activation failed！'
          this.reasonDescribe = '借记卡激活失败！'
          this.globalBizCertFailReason(error)
          window.globalUiKit.alert('借记卡激活失败', '失败原因：' + error + '；入参：' + JSON.stringify(params))
        })
      },
      // 凭证生成影像平台照片
      openVideoUploadFileFun() {
        let bizCertBlob = Utils.dataURLtoBlob(this.bizCertUrl)
        let formData = new FormData()
        formData['enctype'] = 'multipart/form-data'
        formData.append('file', bizCertBlob)
        uploadFile(formData).then(response => {
          console.log('response biz cert link is: ' + response.data)
          this.bizCertName = response.data
          if (window.Settings.imgLinkUploadFlag) {
            this.submitTransImgUploadFun()
          } else {
            this.submitBizCertFun()
          }
        }).catch(error => {
          console.log(error)
          if (window.Settings.imgLinkUploadFlag) {
            this.submitTransImgUploadFun()
          } else {
            this.submitBizCertFun()
          }
        })
      },
      // 上传影像平台
      submitBizCertFun() {
        // 3 文件链接
        let params = {
          "fileInfos": [{
            "fileType": "身份证正面",
            "fileTypeCode": "2601001",
            "fileUrl": this.frontName
          }, {
            "fileType": "身份证反面",
            "fileTypeCode": "2601002",
            "fileUrl": this.reverseName
          }, {
            "fileType": "卡片",
            "fileTypeCode": "2601003",
            "fileUrl": this.frontCardPhoto
          }, {
            "fileType": "客户现场照",
            "fileTypeCode": "2601004",
            "fileUrl": this.cusSceneName
          }, {
            "fileType": "凭证",
            "fileTypeCode": "2601005",
            "fileUrl": this.bizCertName
          }],
          "filePartName": "ZNKFKJHP",
          "modeCode": "ZNKFKJH",
          "modelName": "卡激活",
          "sessionId": Constants.ModelChat.sid
        }
        if (this.cardStateMent) {
          params.fileInfos.push({
            "fileType": "自证声明",
            "fileTypeCode": "2601007",
            "fileUrl": this.cardStateMent
          })
        }
        console.log('request submit biz cert data: ' + JSON.stringify(params))
        submitBizCert(params).then(response => {
          let data = response.data
          console.log('response submit biz form data: ' + JSON.stringify(data))
          this.bizCertSeqNo = data.data
          if (200 == data.code) {
            this.cardActiveFlag = true
            this.dialogVisible = false
            this.nextStep(2)
            this.isShowFlag = 'three'
            this.updateTransPipelineFun()
            // globalUserData.sendEventCardSuccess()
          } else {
            if (!data.message) {
              data.message = 'submit biz form failed！'
            }
            this.reasonDescribe = '卡激活成功，提交电子凭证失败！'
            this.globalBizCertFail(data.message)
            globalUiKit.notify('提示', '提交电子凭证失败！', 'error')
          }
        }).catch(error => {
          console.log(error)
          error = 'submit biz form failed！'
          this.reasonDescribe = '卡激活成功，提交电子凭证失败！'
          this.globalBizCertFail(error)
          globalUiKit.notify('提示', '电子凭证接口请求失败！', 'error')
        })
      },
      // 保存影像平台交易流水
      submitTransImgUploadFun() {
        this.dialogVisible = false
        this.nextStep(2)
        this.isShowFlag = 'three'
        this.updateTransPipelineFun(false, true, '1')
      },
      // 记录交易流水
      saveTransPipelineFun: function () {
        let params = {
          'channelType': Constants.ModelChat.chatType,
          'sessionId': Constants.ModelChat.sid,
          'isSatisfaction': '',
          'docidNo': Constants.ModelChat.sid,
          'businessType': '卡激活',
          'idCardType': '身份证',
          'agentNo': Constants.Agent.agentId,
          'agentName': Constants.Agent.agentName,
          'errorMsg': this.failReason,
          'filePartName': 'ZNKFKJHP',
          'modelCode': 'ZNKFKJH',
          'startDate': '',
          'endDate': '',
          'principalName': '',
          'principalIdType': '',
          'principalIdNum': '',
          'unitedSocialCreditNo': ''
        }
        console.log('request save trans pipeline data: ' + JSON.stringify(params))
        saveTransPipeline(params).then(response => {
          let data = response.data
          console.log('response save trans pipeline data: ' + JSON.stringify(data))
          if (200 == data.code) {
            console.log('记录交易流水成功')
            globalUiKit.notify('提示', '视频交易流水记录成功！', 'success')
          } else {
            console.log('记录交易流水失败')
            window.globalUiKit.alert('视频交易流水记录失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
          }
        }).catch(error => {
          console.log(error)
          window.globalUiKit.alert('视频交易流水记录失败', '失败原因：' + error + '；入参：' + JSON.stringify(params))
        })
      },
      // 更新交易流水
      updateTransPipelineFun: function (customerFlag, imgLinkUploadFlag, type) {
        let params = {
          'sessionId': Constants.ModelChat.sid,
          'transactionDate': this.tranDate,
          'transactionTime': this.tranTime,
          'transactionNo': this.videoSerialId,
          'transactionStatus': this.cardActiveFlag ? '成功' : '失败',
          'errorMsg': this.failReason,
          'channelType': Constants.ModelChat.chatType,
          'isSatisfaction': '',
          'docidNo': Constants.ModelChat.sid,
          'businessType': '卡激活',
          'idCardType': '身份证',
          'agentNo': Constants.Agent.agentId,
          'agentName': Constants.Agent.agentName,
          'filePartName': 'ZNKFKJHP',
          'modelCode': 'ZNKFKJH'
        }
        if (type) {
          params.transactionStatus = type === '1' ? '成功': '失败'
        }
        if (customerFlag) {
          params.cardNo = this.bizCertData.tradIdCard
          params.accountName = this.bizCertData.accountName
          params.idCardNo = this.bizCertData.idCard
          params.customerName = this.bizCertData.name
          params.transactionAmount = this.bizCertData.atmLimitTransfer ? this.bizCertData.atmLimitTransfer : 0
        }
        if (imgLinkUploadFlag) {
          params.frontImge = this.frontName
          params.backImge = this.reverseName
          params.csImge = this.cusSceneName
          params.businessImge = this.bizCertName
          params.card = this.frontCardPhoto
          if (this.cardStateMent) {
            params.stcsImge = this.cardStateMent
          }
          params.uploadFlag = 'img'
        }
        console.log('request update trans pipeline data: ' + JSON.stringify(params))
        saveTransPipeline(params).then(response => {
          let data = response.data
          console.log('response update trans pipeline data: ' + JSON.stringify(data))
          if (200 == data.code) {
            console.log('更新交易流水成功')
            globalUiKit.notify('提示', '视频交易流水记录成功！', 'success')
          } else {
            console.log('更新交易流水失败')
            window.globalUiKit.alert('视频交易流水记录失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
          }
        }).catch(error => {
          console.log(error)
          window.globalUiKit.alert('视频交易流水记录失败', '失败原因：' + error + '；入参：' + JSON.stringify(params))
        })
      },
      // 结束交易
      sendEventCardEnd() {
        this.resetGlobalVarible()
        this.isShowFlag = 'five'
        // globalUserData.sendEventCardEnd()
        this.saveTransPipelineFun()
      },
      // 全局变量重置
      resetGlobalVarible: function () {
        this.frontName = ''
        this.reverseName = ''
        this.cusSceneName = ''
        this.bizCertName = ''
        this.cardStateMent = ''
        this.frontCardPhoto = ''
        this.frontBase64 = 'assets/theme/img/viceoBiz/frontPhoto.png'
        this.reverseBase64 = 'assets/theme/img/viceoBiz/reversePhoto.png'
        this.cusSceneBase64 = 'assets/theme/img/viceoBiz/perpr.png'
        this.frontCardBase64 = ''
        this.reverseCardBase64 = ''
        this.bizCertData = {}
        this.bizCertUrl = ''
        this.dialogVisible = false
        this.customerCardInfo = {}
        this.assignHtml = '签名'
        this.cardAssignFlag = true
        // 视频流水号
        this.videoSerialId = ''
        this.bizCertSeqNo = ''
        this.vqid = ''
        this.failReason = ''
        this.dialogFormVisibleFail = false
        this.cardType = ''
        this.cardActiveFlag = false
        this.tranDate = ''
        this.tranTime = ''
        this.atmOpenTransfer = false
        this.payResult = false
        this.sessionId = ''
        this.reasonDescribe = ''
        sessionStorage.removeItem('businessType')
      }
    }
  }
</script>
<style scoped>
  .step-box {
    width: 100%;
    margin: 0 auto;
  }

  .font-weight{
    font-weight: bold;
  }

  /************************************* 页面一 *********************************************/
  .mt5 {
    margin-top: 5px;
  }

  .mt15 {
    margin: 15px 0px;
  }

  .custom-id-title {
    text-align: center;
    margin: 15px 0;
  }

  .papers-photo {
    height: 186px;
    width: 274px;
  }

  .papers-photo img {
    height: 100%;
    width: 100%;
  }

  .card-media-photo img {
    height: 100%;
    width: 100%;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .peror-photo {
    height: 200px;
    width: 186px;
    overflow: hidden;
  }

  .peror-photo img {
    height: 100%;
    width: 100%;
  }

  .per-result {
    margin: 10px 0;
  }

  /************************************* 页面三 *********************************************/
  .mb10 {
    margin-bottom: 10px;
  }

  .custInfo-box {
    padding: 0px 6%;
  }

  /************************************* 页面四 *********************************************/
  .page-box {
    height: 100%;
    width: 100%;
  }

  .left-box, .right-box {
    height: 750px;
  }

  .paddinglr0 {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }

  .mt10 {
    margin-top: 10px;
  }

  .view-header {
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #f5f7fa;
  }

  .view-middle {
    /*height: 650px;*/
  }

  .view-bottom {
    text-align: center;
    height: 55px;
    line-height: 55px;
  }

  .signNameBox {
    width: 100%;
    height: 225px;
    line-height: 225px;
    border: 1px dashed #ddd;
  }

  /***********************************交易结束********************************************/
  .photo-title {
    padding-top: 20px;
    text-align: center;
  }

  .exceed-photo {
    width: 62px;
    height: 62px;
    margin: 0 auto;
  }

  .photo-box {
    padding-top: 80px;
  }

  .padding-line-height {
    line-height: 26px;
  }

</style>
